<template>
  <div class="container">
    <!-- 热门歌单导航开始 -->
    <div class="nav" @click="getBoutiqueName">
      <a class="one">全部歌单</a>
      <div class="hot">
        <ul>
          <li
            v-for="item in hotName"
            :key="item.id"
            @click="changeType(item.name)"
          >
            <a>{{ item.name }}</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 热门导航结束 -->
    <!-- 展示歌单开始 -->
    <div class="bigbox">
      <ul>
        <li
          v-for="item in songList"
          :key="item.id"
          @click="goSongList(item.id)"
        >
          <div class="img">
            <img :src="item.coverImgUrl" />
          </div>
          <p>{{ item.name }}</p>
          <div class="mask">
            <i class="iconfont icon-bofang1"></i>
          </div>
        </li>
      </ul>
    </div>
    <!-- 展示歌单结束 -->

    <!-- 分页功能开始 -->
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="chengePage"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
    <!-- 分页功能结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotName: {},
      songList: {},
      total: 0,
      pageSize: 50,
      currentPage: 1,
      type: "全部",
      categories: [],
      sub: [],
    };
  },
  methods: {
    //服务器端发送请求获取歌单列表
    async getHotName() {
      const { data } = await this.$http("/playlist/hot");
      this.hotName = data.tags;
    },

    //向服务器发送请求请求歌单
    async getSongList() {
      var offset = (this.currentPage - 1) * this.pageSize;
      const data1 = await this.$http(
        `/top/playlist?offset=${offset}&cat=${this.type}`
      );

      this.songList = data1.data.playlists;
      this.total = data1.data.total;
    },
    //切换页码
    chengePage(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage);
      this.getSongList();
    },
    //切换音乐类型
    changeType(type) {
      this.type = type;
      this.getSongList();
    },
    //点击全部歌曲，获取精品歌单
    async getBoutiqueName() {
      const data2 = await this.$http("/playlist/catlist");
      this.categories = data2.data.categories;
      this.sub = data2.data.sub;
      //console.log(data2);
    },
    //去歌曲列表页
    goSongList(id) {
      // const data3 = await this.$http("/playlist/detail?id=6600958231");
      // console.log(data3);
      this.$router.push(`/songList/${id}`);
    },
  },
  created() {
    //服务器端发送请求获取歌单列表
    this.getHotName();
    //向服务器发送请求请求歌单
    this.getSongList();
  },
};
</script>

<style lang="less" scoped>
// 导航开始
.nav {
  display: flex;
  margin-top: 40px;
  justify-content: space-between;
  .one {
    height: 36px;
    padding: 5px 20px;
    border-radius: 18px;
    border: 1px solid #d4d4d4;
    cursor: pointer;
  }
  .hot {
    ul {
      display: flex;
      height: 36px;
      li {
        height: 36px;
        margin-right: 10px;
        font-size: 12px;
      }
      a {
        line-height: 36px;
        color: #8d8d8d;
        cursor: pointer;
      }
      a:hover {
        color: black;
      }
    }
  }
}
// 导航结束
// 全部歌单开始
.bigbox {
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 205px;
      height: 270px;
      margin-top: 20px;
      border-radius: 5px;
      overflow: hidden;
      color: #454443;
      font-size: 14px;
      .mask {
        display: none;
        position: absolute;
        right: 10px;
        bottom: 70px;
        color: #ec4141;
      }
      .icon-bofang1 {
        font-size: 40px;
      }
      .img {
        width: 205px;
        height: 205px;
        margin-bottom: 10px;
        img {
          border-radius: 5px;
          width: 100%;
        }
      }
    }
    li:hover {
      cursor: pointer;
      .mask {
        display: block;
      }
    }
  }
}
// 全部歌单结束
.page {
  text-align: center;
}
//分页开始
.el-pagination {
  display: inline-block;
  margin: 30px 0 70px;
  li {
    background-color: #fff;
  }
  is-background .el-pager li.active {
    background-color: #ec4141;
  }
}
::v-deep .el-pagination.is-background .el-pager {
  li {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
  }
  li:not(.disabled).active {
    background-color: #ec4141; //修改后的背景图颜色
    color: #fff;
  }
}
//分页结束
</style>